<template>
    <div class="note-publish">
        <div class="editor">
            <QuillEditor theme="snow" v-model:content="state.content" placeholder="请输入笔记内容" contentType="html">
            </QuillEditor>
        </div>
        <div class="note-warpper">
            <div class="note-cell">
                <van-field v-model="state.title" label="标题" placeholder="请输入标题" />
            </div>
            <div class="note-cell">
                <van-field label="图片上传">
                    <template #input>
                        <van-uploader v-model="state.img" :after-read="afterRead" max-count="1" />
                    </template>
                </van-field>

            </div>
            <div class="note-cell">
                <div class="sort" @click="showPicker = true">
                    <span>分类</span>
                    <span>{{ fieldValue }} <van-icon name="arrow" /></span>
                </div>

                <van-popup v-model:show="showPicker" round position="bottom">
                    <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
                </van-popup>
            </div>
        </div>
        <div class="btn">
            <van-button type="primary" block @click="publish">发布笔记</van-button>
        </div>
    </div>
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import axios from '../api/index.js';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';

const columns = [
    { text: "美食", value: "美食" },
    { text: "旅行", value: "旅行" },
    { text: "恋爱", value: "恋爱" },
    { text: "学习", value: "学习" },
    { text: "吵架", value: "吵架" },
]

const fieldValue = ref('美食');
const showPicker = ref(false);

const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false;
    console.log(selectedOptions);
    fieldValue.value = selectedOptions[0].text;
};
const state = reactive({
    content: "",
    title: "",
    img: [],
})

const afterRead = (file) => {
    return file
}
const router = useRouter()
const publish = async () => {
    const res = await axios.post('/note-publish', {
        title: state.title,
        note_content: state.content,
        head_img: state.img.length ? state.img[0].content : " ",
        note_type: fieldValue.value
    })
    console.log(res);
    showToast(res.message)
    setTimeout(() => {
        router.push('/noteClass')
    },1500)
}

</script>

<style lang="less" scoped>
.note-publish {
    min-height: 100vh;

    :deep(.ql-container) {
        width: 100%;
        height: 200px;
    }

    .note-cell {
        width: 99%;
        margin: 0 auto;
        border-bottom: 1px solid #d1d5db;

        .sort {
            display: flex;
            justify-content: space-between;
            line-height: 3;
            padding: 3px 16px;
            color: #323233;
            font-size: .336rem;
        }
    }
    .btn {
        width: 80%;
        margin: 0 auto;
        margin-top: 2rem;
    }
}
</style>